<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="toadd">
        <i class="el-icon-plus"></i>新建用户
      </el-button>
    </div>
    <div class="screen">
      <div class="screenitem">
        <div class="screenname">合同开始日期</div>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="screenitem">
        <div class="screenname">合同结束日期</div>
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="screenitem">
        <div class="screenname">合同号</div>
        <el-input placeholder="请输入内容" style="width:350px;"></el-input>
      </div>
      <div class="screenitem">
        <div class="screenname">广告主</div>
        <el-input placeholder="请输入内容" style="width:350px;"></el-input>
      </div>
      <div class="screenitem">
        <div class="screenname">待付款日期</div>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="screenitem">
        <div class="screenname">代理商</div>
        <el-input placeholder="请输入内容" style="width:350px;"></el-input>
      </div>
      <div class="screenitem">
        <div class="screenname">状态</div>
        <el-select v-model="status" style="width:350px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="screenitem">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="list">
      <el-table :data="tableData"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" :fit="true" border style="width: 100%">
        <el-table-column prop="name" label="合同号" width="70"></el-table-column>
        <el-table-column prop="name" label="合同名称" width="90"></el-table-column>
        <el-table-column prop="name" label="周期" width="100"></el-table-column>
        <el-table-column prop="name" label="代理商" width="90"></el-table-column>
        <el-table-column prop="name" label="广告主" width="90"></el-table-column>
        <el-table-column prop="name" label="合同总金额(万元)" width="100"></el-table-column>
        <el-table-column prop="name" label="备注" width="100"></el-table-column>
        <el-table-column prop="name" label="状态" width="70"></el-table-column>
        <el-table-column prop="name" label="制作时间" width="100"></el-table-column>
        <el-table-column label="补播" width="60">
          <template slot-scope="scope">
            <el-button @click="addplay(scope.row)" type="text" size="small">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="回款记录" width="60">
          <template slot-scope="scope">
            <el-button @click="addmoney(scope.row)" type="text" size="small">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="编辑" width="95">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="播出结果" width="90">
          <template slot-scope="scope">
            <el-button @click="watch(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">上传</el-button>
          </template>
        </el-table-column>
        <el-table-column label="预排期" width="60">
          <template slot-scope="scope">
            <el-button @click="schedule(scope.row)" type="text" size="small">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        ></el-pagination>
      </div>
    </div>
    <div class="prop" v-show="gathering">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          回款记录
          <p class="close1" @click="setgathering">关闭</p>
        </div>
        <div class="info">
          <div class="infoitem">
            <div class="itemnem">回款日期:</div>
            <el-input style="width:60%;" placeholder="请输入内容"></el-input>
          </div>
          <div class="infoitem">
            <div class="itemnem">回款金额:</div>
            <el-input style="width:30%;" placeholder></el-input>
            <div style="margin-left:10px;">万元</div>
          </div>
          <div class="infoitem">
            <div class="itemnem">状态:</div>
            <el-select v-model="moneystatus" style="width:60%;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="file">
          <div class="infoitem" style="width:90%;height:70px;">
            <div class="itemnem" style="margin-right:20px;">回款凭证:</div>
            <el-upload
              :limit="1"
              class="upload-demo"
              ref="upload"
              accept=".xls, .xlsx"
              :show-file-list="true"
              action="/hqx/knowledge/importKnowledge"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
            </el-upload>
          </div>
        </div>
        <div class="showinfo">
          <p>说明</p>
          <el-input type="textarea" :rows="4" placeholder="请输入内容"></el-input>
        </div>
        <div class="save">
          <el-button type="primary">提交</el-button>
        </div>
      </div>
    </div>
    <div class="prop" v-show="lookplay">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:1000px;height:600px;">
        <div class="propheader">
          播出结果
          <p class="close1" @click="setlookplay">关闭</p>
        </div>
        <div class="contenthint">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="检测报告" name="first">
              <div class="tabwarp">
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">播出时间:</div>
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    style="width:250px"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">关键字:</div>
                  <el-input style="width:250px;"></el-input>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">媒介:</div>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">区域:</div>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">省份:</div>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <div class="itemnem" style="margin-right:20px;width:100px;">城市:</div>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="infoitem" style="margin-top:10px;">
                  <el-button type="primary">搜索</el-button>
                </div>
              </div>
              <div class="infolist" >
                <el-table :data="tableData"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
                  <el-table-column prop="date" label="日期" width="100"></el-table-column>
                  <el-table-column prop="date" label="时间" width="100"></el-table-column>
                  <el-table-column prop="date" label="产品中" width="100"></el-table-column>
                  <el-table-column prop="name" label="版本描述" width="100"></el-table-column>
                  <el-table-column prop="name" label="长度" width="50"></el-table-column>
                  <el-table-column prop="name" label="前节目/前广告类型（中）" width="100"></el-table-column>
                  <el-table-column prop="name" label="后节目/后广告类型（中）" width="100"></el-table-column>
                  <el-table-column prop="name" label="正排位置" width="100"></el-table-column>
                  <el-table-column prop="name" label="倒排位置" width="100"></el-table-column>
                  <el-table-column prop="address" label="总位置"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="广告效果" name="fourth">
              <div class="result">
                 <el-table
    :data="tableData"
    border
     :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
    style="width: 100%">
    <el-table-column
      label="序号"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="date"
      label="文件"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="上传人"
      >
    </el-table-column>
    <el-table-column
      prop="province"
      label="上传时间"
      >
    </el-table-column>
    
    
    
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="n(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small">下载</el-button>
      </template>
    </el-table-column>
  </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="prop" v-show="after">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:900px;height:600px;">
        <div class="propheader">
          添加补播
          <p class="close1" @click="setafter">关闭</p>
        </div>
        <div class="contenthint">
          <div class="infoitem" style="margin-top:20px;">
            <div class="itemnem" style="margin-right:20px;width:100px;">回款日期:</div>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="hintitem">
            <div class="hintheader">
              <el-radio v-model="radio" label="1">资源</el-radio>
              <div class="clickselect" @click="setselectresource">点击选择</div>
            </div>
            <div class="tabhin">
              <el-table :data="tableData"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="name" label="部门/单位" width="120"></el-table-column>
                <el-table-column prop="name" label="频道" width="100"></el-table-column>
                <el-table-column prop="address" label="广告位置"></el-table-column>
                <el-table-column prop="address" label="播出日期"></el-table-column>
                <el-table-column prop="address" label="月单价"></el-table-column>
                <el-table-column prop="address" label="折扣"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button @click="a(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">变更</el-button>
                    <el-button type="text" size="small">日志</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
              </div>
            </div>
          </div>
          <div class="hintitem">
            <div class="hintheader">
              <el-radio v-model="radio" label="2">产品</el-radio>
              <div class="clickselect" @click="setproduct">点击选择</div>
              <div class="clickselect">变更</div>
              <div class="clickselect">日志</div>
            </div>
            <div class="tabhin">
              <el-table :data="tableData" :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="name" label="方案编号" width="120"></el-table-column>
                <el-table-column prop="name" label="方案名称" width="100"></el-table-column>
                <el-table-column prop="address" label="有效日期"></el-table-column>
                <el-table-column prop="address" label="一级分类"></el-table-column>
                <el-table-column prop="address" label="二级分类"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button @click="b(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
              </div>
            </div>
          </div>
          <div class="file" style="margin-top:0;width:100%;">
            <div class="infoitem" style="width:90%;height:70px;">
              <div class="itemnem" style="margin-right:20px;">回款凭证:</div>
              <el-upload
                :limit="1"
                class="upload-demo"
                ref="upload"
                accept=".xls, .xlsx"
                :show-file-list="true"
                action="/hqx/knowledge/importKnowledge"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
              </el-upload>
            </div>
          </div>
          <div class="showinfo" style="display:flex;width:100%;">
            <p style="width:100px;">补播说明</p>
            <el-input type="textarea" :rows="2" placeholder="请输入内容"></el-input>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="prop propd" v-show="selectresource">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop1">
        <div class="propheader">
          选择资源
          <p class="close1" @click="setselectresource">关闭</p>
        </div>
        <div class="info1">
          <div class="inputitem">
            <p class="inputname">播出日期</p>
            <el-date-picker
              style="width:300px"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="inputitem">
            <p class="inputname">媒介</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="info1">
          <div class="inputitem">
            <p class="inputname">频 道</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">节目</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">资源</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">频 次</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">资源类型</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem"></div>
          <div class="inputitem" style="width:100%;">
            <p class="inputname">时长</p>
            <el-radio v-model="radio" label="1">5s</el-radio>
            <el-radio v-model="radio" label="2">10s</el-radio>
            <el-radio v-model="radio" label="3">15s</el-radio>
            <el-radio v-model="radio" label="4">30s</el-radio>
            <el-radio v-model="radio" label="5">
              其他
              <el-input style="width:50px;margin-right:5px;"></el-input>s
            </el-radio>
          </div>
        </div>
        <div class="pub">
          <div class="inputitem">
            <p class="inputname">费用</p>
            <div class="price" v-if="false">
              <el-input style="width:50px;"></el-input>
              <div class="other">%</div>
              <div class="others">输入费用</div>
            </div>
            <div class="price" v-if="true">
              <el-input style="width:50px;"></el-input>
              <div class="other">万元/月</div>
              <div class="others">百分比计费</div>
            </div>
          </div>
          <div class="inputitem">
            <p class="inputname">代理费用</p>
            <div class="price" v-if="false">
              <el-input style="width:50px;"></el-input>
              <div class="other">%</div>
              <div class="others">输入费用</div>
            </div>
            <div class="price" v-if="true">
              <el-input style="width:50px;"></el-input>
              <div class="other">万元/月</div>
              <div class="others">百分比计费</div>
            </div>
          </div>
          <div class="inputitem">
            <p class="inputname">备注</p>
            <div class="price">
              <el-input style="width:300px;"></el-input>
            </div>
          </div>
        </div>
        <div class="saves">
          <el-button type="primary">加入</el-button>
        </div>
      </div>
    </div>
    <div class="prop propd" v-show="product">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop1">
        <div class="propheader">
          选择组合产品
          <p class="close1" @click="setproduct">关闭</p>
        </div>
        <div class="info1">
          <div class="inputitem">
            <p class="inputname">播出日期</p>
            <el-date-picker
              style="width:300px"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="inputitem">
            <p class="inputname">一级分类</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">二级分类</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">关键字</p>
            <el-input style="width:300px;"></el-input>
          </div>
          <div class="inputitem">
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
        <div class="tabslist">
          <el-table ref="multipleTable"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="方案编号" width="120"></el-table-column>
            <el-table-column prop="name" label="方案名称" width="120"></el-table-column>
            <el-table-column prop="address" label="有效日期"></el-table-column>
            <el-table-column prop="name" label="一级分类" width="120"></el-table-column>
            <el-table-column prop="name" label="二级分类" width="120"></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            ></el-pagination>
          </div>
          <div class="inputitem" style="display:flex;align-items: center;">
            <p class="inputname" style="width:80px;">备注</p>
            <el-input style="width:300px;"></el-input>
          </div>
        </div>

        <div class="saves">
          <el-button type="primary">加入</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      //补播状态
      after: false,
      lookplay:false,
      //选择组合产品
      product: false,
      //选择资源
      selectresource: false,
      radio: "1",
      //收款证明
      gathering: false,
      moneystatus: "",
      currentPage3: 1,
      value1: "",
      value: "",
      time: "",
      status: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      tableData: [{ name: "xxxx" }, { name: "xxxx" }, { name: "xxxx" }]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    setlookplay(){
  this.lookplay=!this.lookplay
    },
    watch(e){
    console.log(e)
    this.setlookplay()
    },
    //预排期页面
     schedule(e) {
       console.log(e)
      this.$router.push({
        path: "/schedule_y",
        query: {
          type: 1
        }
      });
    },
    toadd() {
      this.$router.push({
        path: "/add",
        query: {
          type: 1
        }
      });
    },
    //点击添加补播
    addplay(e) {
      console.log(e);
      this.setafter();
    },
    setproduct() {
      this.product = !this.product;
    },
    setafter() {
      this.after = !this.after;
    },
    setselectresource() {
      this.selectresource = !this.selectresource;
    },
    addmoney(e) {
      console.log(e);
      this.setgathering();
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    setgathering() {
      this.gathering = !this.gathering;
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.screen {
  width: 97%;

  // background: red;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .screenitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .screenname {
      width: 110px;
    }
  }
}
.list {
  width: 97%;

  // background: red;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 200px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.info {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .infoitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-top: 10px;
    .itemnem {
      width: 30%;
    }
  }
}
.file {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  height: 70px;
}
.showinfo {
  width: 90%;
  margin: 0 auto;
}
.save {
  margin: 0 auto;
  margin-top: 20px;
}
.contenthint {
  width: 95%;
  margin: 0 auto;
  overflow: auto;
  height: 500px;
}
.hintitem {
  width: 95%;
  margin-top: 20px;
  .hintheader {
    display: flex;
    align-items: center;
    .clickselect {
      font-size: 15px;
      color: #169bd5;
      margin-right: 15px;
    }
  }
}
.tabhin {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  .block {
    margin-top: 0px;
  }
}
.propd {
  z-index: 999;
  // display: none;
  .warpprop1 {
    // background: blue;
    background: #fff;
    margin: 0 auto;
    border-radius: 10px;
    width: 800px;
    padding-bottom: 30px;
    // background: red;
    // overflow: auto;
    // height: 500px;

    // height: 100%;
    .tabslist {
      width: 90%;
      margin: 0 auto;
      .block {
        margin-top: 0;
      }
    }
    .info1 {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .inputitem {
        width: 50%;
        display: flex;
        align-items: center;
        .inputname {
          width: 90px;
          margin-left: 20px;
        }
      }
    }
    .saves {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .pub {
      width: 90%;
      margin: 0 auto;

      .inputitem {
        width: 70%;
        display: flex;
        align-items: center;
        .inputname {
          width: 160px;
          margin-left: 20px;
        }
        .price {
          height: 100%;
          display: flex;
          align-items: center;
          .other {
            margin-left: 3px;
          }
          .others {
            color: #169bd5;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
.tabwarp {
  display: flex;
  flex-wrap: wrap;
}
.infolist{
  margin-top: 20px;
}
</style>